<template>
  <!--租户收款账号管理 -->
  <div>
    <section>

      <el-form
        ref="form"
        :model="queryForm"
        label-width="82px"
        :inline="true"
        class="queryForm"
      >
        <el-form-item label="标题:">
          <el-input
            v-model="queryForm.title"
            size="small"
            placeholder="请输入统计模型标题"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div class="but-container">
            <el-button
              type="primary"
              size="small"
              style="margin-right:5px"
              @click="
                getList(
                  page,
                  orderBy.name,
                  orderBy.method,
                  queryForm.title
                )
              "
            >查询
            </el-button
            >
            <el-button size="small" @click="reset">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </section>
    <div style="margin-top: -10px">
      <el-button
        type="primary"
        size="small"
        @click="add"
      >新增
      </el-button
      >
      <section class="right-but" style="display:flex">
        <el-button type="text" style="margin-right:-13px" @click="getList(page,orderBy.name,orderBy.method)">
          <img style="width:44px;height:36px;" src="~@/assets/img/shuaxin.png">
        </el-button>
        <PopoverBut :checkedProps="checkedProps" :options="options" @getCheckeds="handlerCloumn"></PopoverBut>
      </section>
    </div>


    <el-table
      size="mini"
      v-loading="loading"
      :data="tableData"
      style="width: 100%; margin-top: 10px"
      border
      :header-cell-style="{
        'background-color': '#eeeeee !important',
      }"
      :row-class-name="tableRowClassName"
      @sort-change="sortthiscolumn"
    >
      <el-table-column type="index" label="序号" width="70" align="center">
        <template slot-scope="scope">
          <span>{{
              (page.pageNo - 1) * page.pageSize + scope.$index + 1
            }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题">
        <template slot-scope="scope">
          {{scope.row.title}}
        </template>
      </el-table-column>
      <el-table-column prop="type" label="组件类型">
        <template slot-scope="scope">
          {{$dictUtils.getDictLabel("statisticsModelType", scope.row.type, "")}}
        </template>
      </el-table-column>
      <el-table-column  label="数据取值">

          <template slot-scope="scope">
            <el-popover
              placement="top-start"
              width="450"
              trigger="click">
              <section>
                数据1：
                <section>{{
                  scope.row.oneValueSql
                }}</section>
              </section>
              <section>
                后缀1：
                <section>{{scope.row.oneValueSuffix}}</section>
              </section>
              <section>
                数据2：
                <section>{{
                  scope.row.twoValueSql
                }}</section>
              </section>
              <section>
                后缀2：
                 <section>{{scope.row.twoValueSuffix}}</section>
              </section>
              <section>
                数据3：
                <section>{{
                  scope.row.threeValueSql
                }}</section>
              </section>
              <section>
                后缀3：
                <section>{{scope.row.threeValueSuffix}}</section>
              </section>
              <el-button type="text" slot="reference" :underline="false">查看数据取值</el-button>
            </el-popover>
          </template>

      </el-table-column>
<!--      <el-table-column  label="数据取值">

      </el-table-column> -->


     <!-- <el-table-column prop="oneValueSql" label="一号变量SQL"></el-table-column>
      <el-table-column prop="twoValueSql" label="二号变量SQL"></el-table-column>
      <el-table-column prop="threeValueSql" label="三号变量SQL"></el-table-column>
      <el-table-column prop="fourValueSql" label="四号变量SQL"></el-table-column>
      <el-table-column prop="fiveValueSql" label="五号变量SQL"></el-table-column>
      <el-table-column prop="oneValueSuffix" label="一号变量后缀"></el-table-column>
      <el-table-column prop="twoValueSuffix" label="二号变量后缀"></el-table-column>
      <el-table-column prop="threeValueSuffix" label="三号变量后缀"></el-table-column> -->
<!--      <el-table-column prop="varString" label="来源"></el-table-column>-->
<!--      <el-table-column prop="varString" label="变量字符"></el-table-column>
      <el-table-column prop="icon" label="图标"></el-table-column> -->
      <!--<el-table-column prop="state" label="状态" sortable="custom" width="100px" align="center">
        <template slot-scope="scope">
          <section class="activate-state" v-if="scope.row.state===1">
            <i></i>
             {{ $dictUtils.getDictLabel("state", scope.row.state, "") }}
          </section>
          <section class="inactive-state" v-else>
            <i></i>
            {{ $dictUtils.getDictLabel("state", scope.row.state, "") }}
          </section>
        </template>
      </el-table-column>-->
      <el-table-column prop="describes" label="描述"></el-table-column>
      <el-table-column prop="source" label="来源">
        <template slot-scope="scope">
          {{scope.row.source===1?'运营':'自定义'}}
        </template>
      </el-table-column>
      <span v-for="(item, index) in checkedProps" :key="index">
        <el-table-column prop="createDate" :label="item" v-if="item==='创建时间'"></el-table-column>
          <el-table-column prop="createBy.loginName" :label="item" v-if="item==='创建人'"></el-table-column>
          <el-table-column prop="updateDate" :label="item" v-if="item==='上次操作时间'"></el-table-column>
          <el-table-column prop="updateBy.loginName" :label="item" v-if="item==='上次操作人'"></el-table-column>
      </span>
      <el-table-column prop="state" label="状态" width="110">
        <template slot-scope="scope">
          <section class="activate-state" v-if="scope.row.state===1">
            <i></i>
            {{$dictUtils.getDictLabel("state", scope.row.state, "")}}
          </section>
          <section class="inactive-state" v-else>
            <i></i>
            {{$dictUtils.getDictLabel("state", scope.row.state, "")}}
          </section>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" width="252">
        <template slot-scope="scope">
          <template v-for="item in $dictUtils.getDictList('state')">
            <el-link type="primary" v-if="item.value !=='-1'&& item.value!==(scope.row.state+'')" :underline="false" @click="isRepeat(item.value,scope.row)"  :disabled="(scope.row.state===-1&& item.value==='0')||item.value==scope.row.state"
            >{{item.label}}
            </el-link>
          </template>
          <!--<template v-for="item in $dictUtils.getDictList('state')">
            <el-link type="primary"
                     v-if="item.value !=='-1'&&hasPermission('tenant:statisticsModel:edit')&& item.value!==(scope.row.state+'')"
                     :underline="false" @click="editState(item.value,scope.row)"
                     :disabled="(scope.row.state===-1&& item.value==='0')||item.value==scope.row.state">{{ item.label }}
            </el-link>
          </template>-->
          <el-link type="primary" :underline="false" @click="edit(scope.row)"
          >修改
          </el-link
          >
          <el-link
                   type="primary"
                   :underline="false"
                   @click="del(scope.row.id,scope.row.state)"
          >删除
          </el-link
          >

        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="page.pageSize"
      :current-page="page.pageNo"
      layout="total,prev, pager, next, jumper"
      :total="page.total"
    >
    </el-pagination>
    <EditForm
      ref="EditForm"
      @refreshDataList="getList(page,orderBy.name,orderBy.method)"
    ></EditForm>

    <el-dialog
      title="关联租户"
      :close-on-click-modal="false"
      v-dialogDrag
      :visible.sync="joinVisible"
    >
      <el-form label-width="150px" ref="joinForm" :model="joinForm">

        <el-form-item label="选择租户" prop="tenantIds" :rules="[
                              {required: true, message:'请选择租户', trigger:'blur'}
                             ]">
          <el-select clearable v-model="joinForm.tenantIds" multiple placeholder="请选择">
            <el-option
              v-for="item in tenantSelectListData"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="统计模型" prop="statisticsIds" :rules="[
                              {required: true, message:'请选择统计模型', trigger:'blur'}
                             ]">
          <el-select clearable v-model="joinForm.statisticsIds" multiple placeholder="请选择">
            <el-option
              v-for="item in statisticsSelectListData"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联菜单" prop="href" :rules="[
                              {required: true, message:'请输入菜单路径', trigger:'blur'}
                             ]">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入关联菜单，多个用逗号分割"
            v-model="joinForm.href">
          </el-input>

        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <div class="footer-input">
          <el-button size="small" type="primary" @click="doSubmit()" v-noMoreClick
          >确定</el-button
          >
        <el-button size="small" @click="close()">取消</el-button>

        </div>

      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {getList, del, updateState, getStatisticsSelectList} from '@/api/StatisticsModel.js';
  import {save} from '@/api/StatisticsTenantPage.js';
  import {getSelectList} from '@/api/tenant/tenant.js';
  import EditForm from './StatisticsModelEditForm'
  import PopoverBut from '@/components/button/popoverBut'

  const options1 = []
  const cityOptions = ['上海', '北京']
  export default {
    components: {
      EditForm,
      PopoverBut
    },

    data() {
      return {
        msg: '',
        joinVisible: false,
        data: [],
        statisticsSelectListData: [],
        tenantSelectListData: [],
        repeatIds: [],
        checkedProps: options1,
        ShowCloum: {createDate: ''},
        options: [
          {label: '上次操作人', key: 'updateBy.loginName'},
          {label: '上次操作时间', key: 'updateDate'},
          {label: '创建人', key: 'createBy.loginName'},
          {label: '创建时间', key: 'createDate'}
        ],
        tableData: [],
        orderBy: {
          name: 'update_date',
          method: 'desc'
        },
        joinForm: {
          statisticsIds: [],
          href: '',
          tenantIds: []
        },
        loading: false,
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 0
        },
        props: 1,
        queryForm: {
          title: ''
        },
        checkedCities: [],
        cities: cityOptions
      }
    },
    methods: {
      // 停用确认
      isRepeat (event, row) {
        if (row.state === 1) {
          console.log(row)
          this.msg = '停用后，该模型将不可被使用，确认停用吗？';
          this.editState(event, row)

        } else {
          this.msg = '您是否要' + this.$dictUtils.getDictLabel("state", event, "") + '?'
          this.editState(event, row)
        }
      },
      close() {
        this.joinVisible = false
      },
      // 获取列表带分页
      getStatisticsSelectList() {
        this.loading = true
        getStatisticsSelectList({
        }).then((res) => {
          if (res.data.code === '200') {
            this.statisticsSelectListData = res.data.result
          }
          this.loading = false
        })
      },
      getSelectList() {
        this.loading = true
        getSelectList({
        }).then((res) => {
          if (res.data.code === '200') {
            this.tenantSelectListData = res.data.result
          }
          this.loading = false
        })
      },
      getList(params, orderName, orderByAORC, queryNames, queryState) {
        this.loading = true
        getList({
          pageSize: params.pageSize,
          pageNo: params.pageNo,
          orderBy: orderName,
          orderByAORC: orderByAORC,
          title: queryNames,
          state: queryState
        }).then((res) => {
          if (res.data.code === '200') {
            this.tableData = res.data.result.list
            this.page.total = res.data.result.count
          }
          this.loading = false
        })
      },
      // 删除
      del(ids, state) {
        if (state === 1) {
          this.$notify.error({
            title: '错误',
            message: '已启用，不支持删除！'
          });
        } else if (state === 0) {
          this.$notify.error({
            title: '错误',
            message: '已停用，不允许任何操作！'
          });
        } else if (state === -1) {
          this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then((res) => {
            del({
              ids: ids
            }).then((res) => {
              if (res.data.code === '200') {
                this.$message({
                  type: 'success',
                  message: '已删除!'
                })
                this.getList(this.page, this.orderBy.name, this.orderBy.method)
              }
            })
          });
        }
      },
      doSubmit() {
        this.$refs['joinForm'].validate((valid) => {
          if (valid) {
            save(this.joinForm).then((res) => {
              if (res.data.code === '200') {
                this.$message({
                  message: '保存成功',
                  type: 'success'
                })
                this.editVisible = false
                this.$emit('refreshDataList')
              }
            })
          }
        })
      },
      // 添加
      add() {
        this.$refs.EditForm.init('add')
      },
      // 改变状态
      editState(state, row) {
        console.log(row)
        this.$confirm('是否修改状态?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          updateState({id: row.id, state: state}).then(res => {
            if (res.data.code === '200') {
              this.$message({
                type: 'success',
                message: '状态修改成功'
              })
              this.getList(this.page, this.orderBy.name, this.orderBy.method)
            }
          })
        })
      },
      // 编辑
      edit(row) {
        this.$refs.EditForm.init('edit', row)
      },
      join(row) {
        this.joinVisible = true;
      },
      // 是否显示某列数据
      handlerCloumn(e) {
        this.checkedProps = e
        // console.log(e)
      },
      // 重置查询条件
      reset() {
        this.queryForm = {}
      },
      // 排序
      sortthiscolumn(a) {
        console.log(a)
        this.orderBy.name = a.prop
        this.page.pageNo = 1
        if (a.order === 'ascending') {
          this.orderBy.method = 'asc'
        } else {
          this.orderBy.method = 'desc'
        }
        this.getList(this.page, this.orderBy.name, this.orderBy.method)
      },
      handleSizeChange() {
      },
      handleCurrentChange(e) {
        this.page.pageNo = e
        this.getList(this.page, this.orderBy.name, this.orderBy.method)
        console.log(e)
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 === 1) {
          return 'warning-row'
        } else {
          return 'success-row'
        }
      }
    },
    mounted() {
      this.getList(this.page, this.orderBy.name, this.orderBy.method)

    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep .el-input--small .el-input__inner {
    height: 36px;
    line-height: 32px;
    width: 230px;
  }

  .queryForm {
    position: relative;

    .but-container {
      top: 10px;
      margin-left: 20px;
    }

    .el-form-item {
      margin-right: 30px;
    }
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  ::v-deep .el-table .warning-row {
    background: #f7f7f7;
  }
</style>
